<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">

    <title>Happy Birthday</title>
</head>

<body>
    <section class="scene3d">

        <div class="cube skybox">
            <var class="scale">
                <figure class="face front"></figure>
                <figure class="face back"></figure>
                <figure class="face right"></figure>
                <figure class="face left"></figure>
                <figure class="face top"></figure>
                <figure class="face bottom"></figure>
            </var>
        </div>

        <div class="butterfly_container">
            <var class="rotate3d">
                <var class="scale">
                    <var class="translate3d">
                        <var class="translate3d-1">
                            <figure class="butterfly">
                                <svg class="wing left" viewBox="0 0 50 100" class="icon shape-codepen">
                                    <use class="left" xlink:href="#shape-butterfly-1"></use>
                                </svg>
                                <svg class="wing right" viewBox="0 0 50 100" class="icon shape-codepen">
                                    <use class="left" xlink:href="#shape-butterfly-1"></use>
                                </svg>
                            </figure>
                        </var>
                    </var>
                </var>
            </var>
        </div>
        <section />

</body>
<style>
    .butterfly_container {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 100px;
        margin-left: -50px;
        margin-top: -50px;
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-animation: rotatingY 10s linear infinite;
        -moz-animation: rotatingY 10s linear infinite;
        -ms-animation: rotatingY 10s linear infinite;
        -o-animation: rotatingY 10s linear infinite;
        animation: rotatingY 10s linear infinite;
    }

    .butterfly_container var {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 100px;
        margin-left: -50px;
        margin-top: -50px;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .butterfly_container var.rotate3d {
        -webkit-transform: rotate3d(1, 0.5, 0, 70deg);
        -moz-transform: rotate3d(1, 0.5, 0, 70deg);
        -ms-transform: rotate3d(1, 0.5, 0, 70deg);
        -o-transform: rotate3d(1, 0.5, 0, 70deg);
        transform: rotate3d(1, 0.5, 0, 70deg);
    }

    .butterfly_container var.translate3d {
        -webkit-transform: translate3d(-300px, 0px, 0px);
        -moz-transform: translate3d(-300px, 0px, 0px);
        -ms-transform: translate3d(-300px, 0px, 0px);
        -o-transform: translate3d(-300px, 0px, 0px);
        transform: translate3d(-300px, 0px, 0px);
    }

    .butterfly_container var.translate3d-1 {
        -webkit-animation: fluttering 10s ease-in-out infinite;
        -moz-animation: fluttering 10s ease-in-out infinite;
        -ms-animation: fluttering 10s ease-in-out infinite;
        -o-animation: fluttering 10s ease-in-out infinite;
        animation: fluttering 10s ease-in-out infinite;
    }

    .butterfly_container.scale_half var.scale {
        -webkit-transform: scale3d(0.5, 0.5, 0.5);
        -moz-transform: scale3d(0.5, 0.5, 0.5);
        -ms-transform: scale3d(0.5, 0.5, 0.5);
        -o-transform: scale3d(0.5, 0.5, 0.5);
        transform: scale3d(0.5, 0.5, 0.5);
    }

    .butterfly_container.scale_third var.scale {
        -webkit-transform: scale3d(0.333, 0.333, 0.333);
        -moz-transform: scale3d(0.333, 0.333, 0.333);
        -ms-transform: scale3d(0.333, 0.333, 0.333);
        -o-transform: scale3d(0.333, 0.333, 0.333);
        transform: scale3d(0.333, 0.333, 0.333);
    }

    .butterfly_container.scale_quarter var.scale {
        -webkit-transform: scale3d(0.25, 0.25, 0.25);
        -moz-transform: scale3d(0.25, 0.25, 0.25);
        -ms-transform: scale3d(0.25, 0.25, 0.25);
        -o-transform: scale3d(0.25, 0.25, 0.25);
        transform: scale3d(0.25, 0.25, 0.25);
    }

    .butterfly_container figure.butterfly {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 100px;
        margin-left: -50px;
        margin-top: -50px;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    .butterfly_container figure.butterfly .wing {
        position: absolute;
        width: 50px;
        height: 100px;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
        -moz-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
        -ms-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
        -o-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
        transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
    }

    @-webkit-keyframes rotating {
        0% {
            -webkit-transform: rotate3d(0, 0, 0, 0deg);
            -moz-transform: rotate3d(0, 0, 0, 0deg);
            -ms-transform: rotate3d(0, 0, 0, 0deg);
            -o-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
        }

        100% {
            -webkit-transform: rotate3d(0, 1, 0, 720deg);
            -moz-transform: rotate3d(0, 1, 0, 720deg);
            -ms-transform: rotate3d(0, 1, 0, 720deg);
            -o-transform: rotate3d(0, 1, 0, 720deg);
            transform: rotate3d(0, 1, 0, 720deg);
        }
    }

    @-moz-keyframes rotating {
        0% {
            -webkit-transform: rotate3d(0, 0, 0, 0deg);
            -moz-transform: rotate3d(0, 0, 0, 0deg);
            -ms-transform: rotate3d(0, 0, 0, 0deg);
            -o-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
        }

        100% {
            -webkit-transform: rotate3d(0, 1, 0, 720deg);
            -moz-transform: rotate3d(0, 1, 0, 720deg);
            -ms-transform: rotate3d(0, 1, 0, 720deg);
            -o-transform: rotate3d(0, 1, 0, 720deg);
            transform: rotate3d(0, 1, 0, 720deg);
        }
    }

    @-ms-keyframes rotating {
        0% {
            -webkit-transform: rotate3d(0, 0, 0, 0deg);
            -moz-transform: rotate3d(0, 0, 0, 0deg);
            -ms-transform: rotate3d(0, 0, 0, 0deg);
            -o-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
        }

        100% {
            -webkit-transform: rotate3d(0, 1, 0, 720deg);
            -moz-transform: rotate3d(0, 1, 0, 720deg);
            -ms-transform: rotate3d(0, 1, 0, 720deg);
            -o-transform: rotate3d(0, 1, 0, 720deg);
            transform: rotate3d(0, 1, 0, 720deg);
        }
    }

    @-o-keyframes rotating {
        0% {
            -webkit-transform: rotate3d(0, 0, 0, 0deg);
            -moz-transform: rotate3d(0, 0, 0, 0deg);
            -ms-transform: rotate3d(0, 0, 0, 0deg);
            -o-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
        }

        100% {
            -webkit-transform: rotate3d(0, 1, 0, 720deg);
            -moz-transform: rotate3d(0, 1, 0, 720deg);
            -ms-transform: rotate3d(0, 1, 0, 720deg);
            -o-transform: rotate3d(0, 1, 0, 720deg);
            transform: rotate3d(0, 1, 0, 720deg);
        }
    }

    @keyframes rotating {
        0% {
            -webkit-transform: rotate3d(0, 0, 0, 0deg);
            -moz-transform: rotate3d(0, 0, 0, 0deg);
            -ms-transform: rotate3d(0, 0, 0, 0deg);
            -o-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
        }

        100% {
            -webkit-transform: rotate3d(0, 1, 0, 720deg);
            -moz-transform: rotate3d(0, 1, 0, 720deg);
            -ms-transform: rotate3d(0, 1, 0, 720deg);
            -o-transform: rotate3d(0, 1, 0, 720deg);
            transform: rotate3d(0, 1, 0, 720deg);
        }
    }

    @-webkit-keyframes rotatingY {
        100% {
            -webkit-transform: rotateY(-360deg);
            -moz-transform: rotateY(-360deg);
            -ms-transform: rotateY(-360deg);
            -o-transform: rotateY(-360deg);
            transform: rotateY(-360deg);
        }
    }

    @-moz-keyframes rotatingY {
        100% {
            -webkit-transform: rotateY(-360deg);
            -moz-transform: rotateY(-360deg);
            -ms-transform: rotateY(-360deg);
            -o-transform: rotateY(-360deg);
            transform: rotateY(-360deg);
        }
    }

    @-ms-keyframes rotatingY {
        100% {
            -webkit-transform: rotateY(-360deg);
            -moz-transform: rotateY(-360deg);
            -ms-transform: rotateY(-360deg);
            -o-transform: rotateY(-360deg);
            transform: rotateY(-360deg);
        }
    }

    @-o-keyframes rotatingY {
        100% {
            -webkit-transform: rotateY(-360deg);
            -moz-transform: rotateY(-360deg);
            -ms-transform: rotateY(-360deg);
            -o-transform: rotateY(-360deg);
            transform: rotateY(-360deg);
        }
    }
</style>

</html>